<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<script type="text/javascript">
			function Circle(x,y,radius,ix,iy){
				this.x = x;
				this.y = y;
				this.ix = ix;
				this.iy = iy;
				this.radius = radius;
			}
			Circle.prototype.draw = function(context){
				context.save();
				context.translate(this.x,this.y);
				context.beginPath();
				context.arc(0,0,this.radius,0,Math.PI*2,false);
				context.fillStyle="#ff0";//设置填充颜色
				context.fill();//开始填充
				context.strokeStyle="blue";//将线条颜色设置为蓝色
				context.stroke();
				context.restore();
			}
			/* function Intersect(circleA,circleB) {
			    var dx = circleA.x-circleB.x;
			    var dy = circleA.y-circleB.y;
			    var distance = Math.sqrt(dx*dx+dy*dy);
				//是否相碰撞
			    if(distance < (circleA.radius + circleB.radius)){
					var z = circleA.radius+circleB.radius;
					var x = Math.abs(circleA.x - circleB.x);
					var y = Math.abs(circleA.y-circleB.y);
					var power = 3;
					var power_x = power * x / z;
					var power_y = power * y /z;
					if(circleA.x > circleB.x){
					  circleA.ix = power_x;
					  circleB.ix = 0 - power_x;
					}else{
					  circleA.ix = 0 - power_x;
					  circleB.ix = power_x;
					}
					if(circleA.y > circleB.y){
						  circleA.iy = power_y;
						  circleB.iy =  0 - power_y;
					}else{
					  circleA.iy = 0 - power_y;
					  circleB.iy = power_y;
					}
				}
			} */
			function flipoff(c){
				//是否滑出边缘
				if(c.x <=0 || c.x >= 500){
					c.ix = 0 - c.ix;
				}
				if(c.y <=0 || c.y >= 500){
					c.iy = 0 - c.iy;
				}
			}
			function drawAnimation() {
			    window.requestAnimationFrame(drawAnimation);
				
			    context.clearRect(0, 0, canvas.width, canvas.height);
				
			    Intersect(circleA,circleB);
				flipoff(circleA);
				flipoff(circleB);
				
			    circleA.x += circleA.ix;
			    circleA.y += circleA.iy;
			    circleB.x += circleB.ix;
			    circleB.y += circleB.iy;
			    circleA.draw(context);
			    circleB.draw(context);
				
			}
			window.onload = function () {
			    canvas = document.getElementById('myCanvas');
			    context = canvas.getContext('2d');
			    // Capturemouse(canvas);
				//requestAnimationFrame请求的频率是60次/s，所以相当于横向速度是60px/s
				circleA = new Circle(150,100,50,1,1);
			    circleB = new Circle(300,150,50,0,0);
			    drawAnimation();
			}
			//碰撞的前提是双方的速度是相等的，碰撞后的速度也相等
			function Intersect(c1,c2) {
				var dx = c1.x-c2.x;
				var dy = c1.y-c2.y;
				var distance = Math.sqrt(dx*dx+dy*dy);
				//是否相碰撞
				if(distance < (c1.radius + c2.radius)){
					//计算碰触点
					var intersect_x = (c1.x + c2.x)/2;
					var intersect_y = (c1.y + c2.y)/2;
					//根据当前中心点和碰触点计算距离，这个距离只能当做比例使用
					var c1_power_x =  c1.x - intersect_x;
					var c1_power_y =  c1.y - intersect_y;
					//碰撞时的能量交换，会认为对方将自身所有能量交换过来
					//但是当对方能量为0的时候，自身能量损失很小，反而对方获取了同样大小的能量，这不符合能量守恒
					var base1 = Math.sqrt((Math.pow(c2.ix,2)+Math.pow(c2.iy,2))/(Math.pow(c1_power_x,2)+Math.pow(c1_power_y,2)));
					c1.ix += c1_power_x * base1;
					c1.iy += c1_power_y * base1;
					
					var c2_power_x = c2.x - intersect_x;
					var c2_power_y = c2.y - intersect_y;
					var base2 = Math.sqrt((Math.pow(c1.ix,2)+Math.pow(c1.iy,2))/(Math.pow(c2_power_x,2)+Math.pow(c2_power_y,2)));
					c2.ix += c2_power_x * base2;
					c2.iy += c2_power_y * base2;
					
				}
				//未知能量衰减
				if(c1.ix >  10)c1.ix--;
				if(c2.ix >  10)c2.ix--;
				if(c1.ix < -10)c1.ix++;
				if(c2.ix < -10)c2.ix++;
							 
				if(c1.iy >  10)c1.iy--;
				if(c2.iy >  10)c2.iy--;
				if(c1.iy < -10)c1.iy++;
				if(c2.iy < -10)c2.iy++;
			}
		</script>
	</body>
</html>
